<template>
  <div>
    <el-dialog :title="isAdd ? '添加菜单' : '编辑菜单'" :model-value='isShow' :before-close="cancel">
      <el-form :model="menuForm" ref="formRef" :rules="rules">
        <el-form-item label="菜单名称" :label-width="formLabelWidth" prop="title">
          <el-input autocomplete="off" v-model="menuForm.title" />
        </el-form-item>
        <el-form-item label="上级菜单" :label-width="formLabelWidth" prop="pid">
          <el-select placeholder="请选择上级菜单" v-model="menuForm.pid" @change="changePid">
            <el-option label="顶级菜单" :value="0" />
            <el-option v-for="item in store.getters['menu/getMenu']" :key="item.id" :label="item.label"
              :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="菜单类型" :label-width="formLabelWidth">

          <el-radio :label="1" v-model="menuForm.type" disabled>目录</el-radio>
          <el-radio :label="2" v-model="menuForm.type" disabled>菜单</el-radio>

        </el-form-item>
        <el-form-item label="菜单地址" :label-width="formLabelWidth" v-if="menuForm.type == 1">
          <el-input autocomplete="off" v-model="menuForm.url" />
        </el-form-item>
        <el-form-item label="菜单图标" :label-width="formLabelWidth" v-else>
          <el-input autocomplete="off" v-model="menuForm.icon" />
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-switch style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" :active-value="1"
            :inactive-value="2" v-model="menuForm.status" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="confirm">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, defineEmits, defineProps, defineExpose } from 'vue'
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { menuadd, menuinfo, menuedit } from '../../request/api';
import { useStore } from 'vuex'
let store = useStore()


let props = defineProps({
  isShow: Boolean,
  isAdd: Boolean
})
let menuForm = ref({
  pid: 0,
  title: "",
  icon: "",
  type: 1,
  url: "",
  status: 1,
})
let reset = () => {
  menuForm.value = {
    pid: 0,
    title: "",
    icon: "",
    type: 1,
    url: "",
    status: 1,
  };
  formRef.value?.resetFields()
}
let changePid = () => {
  menuForm.value.type = menuForm.value.pid == 0 ? 1 : 2
}
//规则验证
let rules = reactive<FormRules>({
  title: [
    { required: true, message: "请输入菜单名称", trigger: "blur" },
    { min: 2, max: 6, message: "长度在2-6", trigger: "blur" },
  ],
  pid: [
    {
      required: true,
      message: "Please select pid",
      trigger: "change",
    },
  ],
});
let emit = defineEmits(['cancel'])
let formRef = ref<FormInstance>()
let cancel = () => {
  emit('cancel', false)
  reset()
}
let lookup = (id: number) => {
  menuinfo({ id }).then((res: any) => {
    if (res.data.code == 200) {
      // console.log(id);
      menuForm.value = res.data.list;
      menuForm.value.id = id
    } else {
      ElMessage.error(res.data.msg)
    }
  })
}
let confirm = () => {
  formRef.value?.validate((val) => {
    if (val) {
      if (props.isAdd) {
        menuadd(menuForm.value).then((res: any) => {
          if (res.data.code == 200) {
            // console.log(res,'///////////');

            ElMessage.success(res.data.msg)
            cancel()
            // 重新调用
            store.dispatch('menu/changeMenuAction')
          } else {
            ElMessage.error(res.data.msg)
          }
        })
      } else {
        menuedit(menuForm.value).then((res: any) => {
          if (res.data.code == 200) {
            ElMessage.success(res.data.msg);
            cancel()
            store.dispatch('menu/changeMenuAction')
          } else {
            ElMessage.error(res.data.msg);
          }
        })
      }

    }
  })
}
defineExpose({
  lookup
})
const formLabelWidth = '140px'
</script>

<style scoped lang="less"></style>